<template>
    <span class="tag" :class="type">
        <slot></slot>
        <i class="bi bi-x" @click="remove($event)" v-if="close"></i>
    </span>
</template>
<script>
import { ref,watch,getCurrentInstance } from 'vue';
export default {
    name:'g-tag',
    props:{
        type:{
            type:String,
            default:'default'
        },
        data:{
            type:Array,
            default:[]
        },
        close:{
            type:Boolean,
            default: false
        }
    },
    setup(props) {
        let type = ref(props.type);

        let remove = (event)=>{
            event.target.parentNode.remove();
        }

        return {
            // 变量
            type,
            // 方法
            remove
        }
    }
}
</script>
<style scoped>
    .tag{
        display: inline-block;
        margin: 5px;
        padding:3px 5px ;
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
    }
    .tag i{
        margin-left:5px;
        font-size:14px;
        cursor: pointer;
    }
    .default{
        border: 1px solid #dddddd;
        color: #797979;
        background-color: #ececec;
    }
    .success{
        background-color: #EEF9EC;
        color: #67C23A;
        border: 1px solid #B8E7CD;
    }
    .warning{
        background-color: #FFF6EC;
        color: #E6A23C;
        border: 1px solid #FEEBD8;
    }
    .error{
        background-color: #FFEFF0;
        color: #F56C6C;
        border: 1px solid #FFC4C9;
    }
</style>